<template>
	<view class="bond-item">
		<u-navbar :border-bottom="true" :background="{background:'#fff'}">
			<view class="u-text-center navbar-content-title" style="width: 100%;">
				<view>{{info.SECURITY_NAME_ABBR? info.SECURITY_NAME_ABBR:'-'}}</view>
				<view class="u-font-22" v-if="titleCodeShow">{{origInfo.bond_code}}</view>
				<view class="u-font-22" :class="[$u.func.priceCls(origInfo,'zd')]" v-else>
					<text class="u-m-r-20 ">{{$u.func.bondPrice(origInfo, origInfo.options&&origInfo.options.spj?origInfo.options.spj:0)}}</text>
					<text>{{origInfo.j_bfb ? (origInfo.j_bfb/100)+'%':'-'}}</text>
				</view>
			</view>
		</u-navbar>
		
		<view class="info u-bg-white u-font-26 u-p-lr-10 u-p-tb-26 u-border-bottom">
			<u-row gutter="20" align="top">
				<u-col span="3">
					<view :class="[$u.func.priceCls(info,'zd')]">
						<view class="u-font-bold u-font-40 u-flex">
							<text class="u-col-top" >{{$u.func.bondPrice(info, info.options&&info.options.spj?info.options.spj:0)}}</text>
						</view>
						<view class="u-flex u-font-22">
							<view class="u-flex-6">{{info.j_bfb ? (info.j_bfb/100).toFixed(2)+'%':'-'}}</view>
							<view class="u-flex-6 u-text-right">{{$u.func.bondDs(info.j_ds, info.type)}}</view>
						</view>
					</view>
				</u-col>
				<u-col span="3">
					<view class="u-flex">
						<text class="u-type-info-dark">今开</text>
						<view class="u-flex-12 u-text-right" :class="[$u.func.priceCls(info, 'j_k')]">{{$u.func.bondPrice(info,info.options&&info.options.j_k ? info.options.j_k:0)}}</view>
					</view>
					<view class="u-flex u-m-t-12">
						<text class="u-type-info-dark">总手</text>
						<view class="u-flex-12 u-text-right">{{$u.func.bondCl(info.c_l)}}</view>
					</view>
				</u-col>
				<u-col span="3">
					<view class="u-flex">
						<text class="u-type-info-dark">最高</text>
						<view class="u-flex-12 u-text-right" :class="[$u.func.priceCls(info, 'max')]">{{$u.func.bondPrice(info,info.options&&info.options.max ? info.options.max:0)}}</view>
					</view>
					<view class="u-flex u-m-t-12">
						<text class="u-type-info-dark">金额</text>
						<view class="u-flex-12 u-text-right">{{$u.func.bondCe(info.c_e)}}</view>
					</view>
				</u-col>
				<u-col span="3">
					<view class="u-flex">
						<text class="u-type-info-dark">最低</text>
						<view class="u-flex-12 u-text-right" :class="[$u.func.priceCls(info, 'min')]">{{$u.func.bondPrice(info,info.options&&info.options.min ? info.options.min:0)}}</view>
					</view>
					
					<view class="u-flex u-m-t-12">
						<text class="u-type-info-dark">振幅</text>
						<view class="u-flex-12 u-text-right" :class="[$u.func.priceCls(info, 'zd')]">{{$u.func.bondZf(info)}}%</view>
					</view>
				</u-col>
			</u-row>
			
			<u-row gutter="20" v-if="!showDate">
				<u-col span="3">
					<view class="u-flex u-font-22 u-m-t-12">
						<text class="u-type-info-dark">昨收</text>
						<view class="u-flex-12 u-text-right">{{$u.func.bondPrice(info,info.options&&info.options.z_s ? info.options.z_s:0)}}</view>
					</view>
				</u-col>
				<u-col span="3">
					<view class="u-flex u-font-20 u-m-t-12">
						<text class="u-type-info-dark">转股价值</text>
						<view class="u-flex-12 u-text-right">{{info.options&&info.options.TRANSFER_VALUE ? info.options.TRANSFER_VALUE.toFixed(2) :'-'}}</view>
					</view>
				</u-col>
				<u-col span="3">
					<view class="u-flex u-font-20 u-m-t-12">
						<text class="u-type-info-dark">转股溢价</text>
						<view class="u-flex-12 u-text-right" :class="[$u.func.redOrGreen(info.TRANSFER_PREMIUM_RATIO)]">{{info.TRANSFER_PREMIUM_RATIO}}%</view>
					</view>
				</u-col>
				<u-col span="3">
					<!-- <view class="u-text-right u-m-t-12"><u-tag text="更多" type="info" size="mini"></u-tag></view> -->
				</u-col>
			</u-row>
			<u-row gutter="20" v-else>
				<u-col span="9">
					<view class="u-flex u-font-20 u-m-t-12 u-type-info-dark">
						{{info.created_at ? info.created_at.split(' ')[0]:'-'}}
					</view>
				</u-col>
				
				<u-col span="3">
					<!-- <view class="u-text-right u-m-t-12"><u-tag text="更多" type="info" size="mini"></u-tag></view> -->
				</u-col>
			</u-row>
		</view>
		<view class="charts-box u-bg-white u-border-bottom" v-show="false">
		  <qiun-data-charts
		    type="candle"
		    :chartData="chartData" 
			canvasId="bond_item_charts" 
		    :canvas2d="true"
		    background="none"
		    :ontouch="true" 
			@getIndex="getIndex"
		  />
		</view>
		<view class="u-m-t-20 u-bg-white u-font-26 bond-info">
			<view class="u-p-tb-30 u-border-bottom u-m-b-10">
				<u-section title="所属板块" line-color="#2979ff" :right="false" :arrow="false"></u-section>
			</view>
			<view class="u-flex u-flex-wrap bk-list u-p-10">
				<view class="item u-flex" v-for="(v, k) in bkLists" :key="k">
					<view class="u-type-info-dark">{{v.bk_name}}</view>
					<view :class="v.bk_ds3 > 0 ? 'red':'green'" class="u-flex-6 u-text-right">{{v.bk_ds3 / 100}} %</view>
				</view>
			</view>
		</view>
		
		<view class="u-m-t-20 u-bg-white u-font-26 bond-info">
			<view class="u-p-tb-30 u-border-bottom u-m-b-10">
				<u-section title="基本条款" line-color="#2979ff" :right="false" :arrow="false"></u-section>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">债券代码</text></u-col>
					<u-col span="3" text-align="left">{{info.bond_code}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">债券简称</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'SECURITY_NAME_ABBR')}}</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">发行规模</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'ACTUAL_ISSUE_SCALE')}}亿</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">债券类型</text></u-col>
					<u-col span="3" text-align="left">可转换债券</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">正股代码</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'CONVERT_STOCK_CODE')}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">正股简称</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'SECURITY_SHORT_NAME')}}</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">正股股价</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'options.CONVERT_STOCK_PRICE')}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">转股溢价率</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'TRANSFER_PREMIUM_RATIO')}}%</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">转股价格</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'options.INITIAL_TRANSFER_PRICE')}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">转股价值</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'options.TRANSFER_VALUE','-','toFixed')}}</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">上市日期</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'options.LISTING_DATE','-','date')}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">摘牌日期</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'options.DELIST_DATE','-','date')}}</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">最新债券评级</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'options.RATING')}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">交易市场</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.market(info.type)}}</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">评级机构</text></u-col>
					<u-col span="9" text-align="left">{{$u.func.getVal(info, 'options.PARTY_NAME')}}</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">发行价格(元)</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info, 'options.ISSUE_PRICE')}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">计息方式</text></u-col>
					<u-col span="3" text-align="left">累进利率</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">票面利率(当期)</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info, 'options.COUPON_IR')}}%</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">付息频率</text></u-col>
					<u-col span="3" text-align="left">每年付息一次</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">下一付息日</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info, 'options.PAY_INTEREST_DAY')}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">距下一付息日</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info, 'options.PAY_INTEREST_DAY','-','day')}}</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">利率说明</text></u-col>
					<u-col span="9" text-align="left">{{$u.func.getVal(info, 'options.INTEREST_RATE_EXPLAIN')}}</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">剩余期限</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info, 'options.EXPIRE_DATE',"-","syqx")}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">期限</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info, 'options.BOND_EXPIRE')}}年</u-col>
				</u-row>
			</view>
			
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">起息日期</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info, 'options.VALUE_DATE',"-","date")}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">到期日期</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info, 'options.EXPIRE_DATE',"-","date")}}</u-col>
				</u-row>
			</view>
		</view>
		
		<view class="u-m-t-20 u-bg-white u-font-26 bond-info">
			<view class="u-p-tb-30 u-border-bottom u-m-b-10">
				<u-section title="可转债条款" line-color="#2979ff" :right="false" :arrow="false"></u-section>
			</view>
			
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">转股起始</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info, 'options.TRANSFER_START_DATE',"-","date")}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">转股截止</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info, 'options.TRANSFER_END_DATE',"-","date")}}</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">转股价格</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'options.INITIAL_TRANSFER_PRICE')}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">正股溢价率</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'options.TRANSFER_VALUE','-','toFixed')}}</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">回售触发价(元)</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'options.RESALE_TRIG_PRICE')}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">回售起始</text></u-col>
					<u-col span="3" text-align="left">-</u-col>
				</u-row>
			</view>
			<view class="row">
				<u-row gutter="0">
					<u-col span="3" text-align="left"><text class="u-type-info-dark">赎回触发价(元)</text></u-col>
					<u-col span="3" text-align="left">{{$u.func.getVal(info,'options.REDEEM_TRIG_PRICE')}}</u-col>
					<u-col span="3" text-align="left"><text class="u-type-info-dark">赎回起始</text></u-col>
					<u-col span="3" text-align="left">-</u-col>
				</u-row>
			</view>
			
		</view>
		
		<view class="u-m-t-20 u-bg-white u-font-26 bond-info">
			<view class="u-p-tb-30 u-border-bottom u-m-b-10 u-flex" @tap="hstkStatus = !hstkStatus">
				<u-section title="回售条款" line-color="#2979ff" :right="false" :arrow="false"></u-section>
				<view class="u-p-r-20"><u-icon :name="hstkStatus ? 'arrow-up':'arrow-down'"></u-icon></view>
			</view>
			<view v-show="hstkStatus" class="u-p-20" style="line-height: 50rpx;">{{$u.func.getVal(info,'options.RESALE_CLAUSE')}}</view>
		</view>
		<view class="u-m-t-20 u-bg-white u-font-26 bond-info">
			<view class="u-p-tb-30 u-border-bottom u-m-b-10 u-flex" @tap="shtkStatus = !shtkStatus">
				<u-section title="赎回条款" line-color="#2979ff" :right="false" :arrow="false"></u-section>
				<view class="u-p-r-20"><u-icon :name="shtkStatus ? 'arrow-up':'arrow-down'"></u-icon></view>
			</view>
			<view v-show="shtkStatus" class="u-p-20" style="line-height: 50rpx;">{{$u.func.getVal(info,'options.REDEEM_CLAUSE')}}</view>
		</view>
	</view>
</template>

<script>
	import deepMerge from "@/uview-ui/libs/function/deepMerge";
	
	export default{
		data(){
			return {
				info:{},
				origInfo:{},
				titleCodeShow:true,
				chartData:{},
				dayData:[],
				bkLists:[],
				showDate:false,
				hstkStatus:false,
				shtkStatus:false
			}
		},
		onLoad({code}) {
			// code = 127025;
			if(!code){
				
				return false;
			}
			
			this.$u.api.bondItem(code).then(data=>{
				console.log(data);
				
				this.origInfo = data.data;//deepMerge(data.data.item,this.itemDay);

				this.info = data.data;
				this.bkLists = data.bks;
				
				let dayData = data.day_data;
				
				this.dayData = dayData;
				
				let categories = [];
				let series = {"name":this.info.SECURITY_NAME_ABBR, "data":[]}
				
				for(let i in dayData){
					let itemDay = dayData[i];
					const date = itemDay['created_at'].split(' ')[0];
					categories.push(date);
					
					const j_k = this.$u.func.bondPrice(this.info, itemDay.j_k),
						  spj = this.$u.func.bondPrice(this.info, itemDay.spj),
						  min = this.$u.func.bondPrice(this.info, itemDay.min),
						  max = this.$u.func.bondPrice(this.info, itemDay.max);
					
					let data = [j_k,spj,min,max];
					
					series.data.push(data);
				}
				
				 this.chartData = {"categories":categories, "series":[series]};
				
			});
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			if(scrollTop > 30 && this.titleCodeShow) this.titleCodeShow = false;
			if(scrollTop < 30 && !this.titleCodeShow) this.titleCodeShow = true;
		},
		methods:{
			getIndex(e){
				const currentIndex = e.currentIndex.index;
				
				if(currentIndex > 0){
					const item = this.dayData[currentIndex];
					let spj = this.$u.func.bondPrice(this.info, item['spj']?item['spj']:0),
						z_s = this.$u.func.bondPrice(this.info, item['z_s']?item['z_s']:0);
						console.log(spj, z_s,'------------')
					let data = {
						"j_ds": (spj-z_s)*100,
						"j_bfb":((spj-z_s)/z_s)*10000,
						"c_l":item["c_l"],
						"c_e":item['c_e'],
						"created_at":item.created_at,
						"options":{"j_k":item.j_k, "max":item.max, "min":item.min, "spj":item.spj, "z_s":item.z_s}
					}
					this.info =  deepMerge(this.info, data);
					this.showDate = true;
				}else{
					this.info = this.origInfo;
					this.showDate = false;
				}
				
				console.log(this.origInfo)
			}
		}
	}
</script>

<style scoped>
	.navbar-content-title {
		position: fixed;
		left: 0;
		right: 0;
		height: 60rpx;
		text-align: center;
	}
	.charts-box{
		padding-top:20rpx;
		width: 100%;
		height:500rpx;
	}
	.bond-info .row{
		padding: 10rpx 20rpx;
	}
	.bk-list .item{
		width: calc(50% - 20rpx);
		border: 1rpx solid #eeeeee;
		padding: 20rpx 10rpx;
		margin: 10rpx;
	}
</style>
